<template>
  <div class="wrap">
    <h1>less 作用域  scope </h1>
  </div>
</template>

<script>
export default {
  name: 'Scope',
  props: {

  }
}

/*
  less 作用域界定作用的有效范围
  less的作用范围从当前域开始，如果没有，会向父级一路向上查找，示例如下:
  h1文案的颜色首先在当前域 {} 内开始查找这个变量，有则使用，没有则向上一级域开始查找并且使用
*/
</script>


<style lang="less" scoped>
  @font-color: red; 
  .wrap h1{
    @font-color: orange;
    color: @font-color;
  }
</style>
